<body>
<div id = "title">
<h2>代辦事項清單</h2>
</div>
<div>
<input type="text" id = "list_input" placeholder = "例如:買早餐">
<button id = "button_submit" onclick="createItem()" > Create </button>
</div>
<div id = "show_list">
<ul id = "to_do_list"></ul>
</div>
<div id = "delete_list">
<button onclick="deleteList()" id="button_delete"> Delete All Item </button>
</div>
<script src="index.js"></script>
</body>
function createItem() {
let input_text = document.querySelector("#list_input").value;
document.querySelector("#to_do_list").innerHTML += "<li class = 'item'>"
+ input_text + "<button class = 'button_delete_item'></button>" + "</li>";
}
function deleteList() {
let delete_all = document.querySelector("#to_do_list");
console.log(delete_all.firstChild)
while(delete_all.firstChild){
delete_all.removeChild(delete_all.firstChild);
}
}
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/firstChild
以上就是今天的教學,感謝大家觀看。